<template>
  <div class="main-box">
    <TreeFilter
      title="城市选择"
      :request-api="getCityList"
      label="name"
      id="id"
      :expand-all="false"
      :default-value="initParams.city"
      @change="changeTreeFilter"
    >
      <template #default="{ row }"> {{ row.data.name }}</template>
    </TreeFilter>
    <div class="table-box">
      <ProTable ref="proRef" :columns="columns" :request-api="getCityLink" :initParam="initParams">
        <template #tableHeader="scope">
          <el-button type="primary" @click="opera(undefined)" v-auth="'创建'">创建链接</el-button>
          <el-button
            type="danger"
            :disabled="scope.selectedListIds.length === 0"
            @click="deleteItem(scope.selectedListIds)"
            v-auth="'删除'"
            >批量删除</el-button
          >
        </template>
        <template #opera="{ row }">
          <el-button type="primary" link @click="opera(row)" v-auth="'编辑友情链接'">编辑</el-button>
          <el-button type="primary" link @click="deleteItem([row.id])" v-auth="'删除'">删除</el-button>
        </template>
        <template #link="{ row }">
          <a :href="row.link" class="hover:text-[blue]" target="blank">{{ row.title }}</a>
        </template>
        <template #code="{ row }">
          <el-tag v-show="row.code" type="success">是</el-tag>
          <el-tag v-show="!row.code" type="warning">否</el-tag>
        </template>
      </ProTable>
      <friendlyDrawer ref="friendlyRef"></friendlyDrawer>
    </div>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { reactive, ref } from "vue";
import { getCityList, getCityLink, editFriendlyLink, createFriendlyLink, deleteFriendlyLink } from "@/api/modules/friendlyLinks";
import friendlyDrawer from "./components/friendlyDrawer.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { useHandleData } from "@/hooks/useHandleData";
const initParams = reactive({ pageSize: 10, pageNum: 1, city: 0 });
const proRef = ref<InstanceType<typeof ProTable> | null>();
const columns: ColumnProps[] = [
  { type: "selection", width: 60 },
  { prop: "sort", label: "排序" },
  { prop: "title", label: "标题", isShow: false },
  { prop: "link", label: "链接" },
  { prop: "code", label: "是否全局模板" },
  { prop: "opera", label: "操作" }
];
const friendlyRef = ref<InstanceType<typeof friendlyDrawer> | null>();
const opera = (row: any) => {
  const params: any = {
    row: {
      title: row ? row.title : "",
      link: row ? row.link : "",
      sort: row ? row.sort : 100,
      city: initParams.city
    },
    api: row ? editFriendlyLink : createFriendlyLink,
    getTable: proRef.value?.getTableList
  };
  friendlyRef.value?.acceptParams(params);
};
const changeTreeFilter = (val: any) => {
  initParams.city = val;
};

const deleteItem = async (ids: any) => {
  try {
    await useHandleData(deleteFriendlyLink, { ids }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};
</script>

<style></style>
